<template>
  <div>
    <!--swiper!-->
    <div class="container1">
    	<div class="swiper-container container1_swiper-container">
    		<div class="swiper-wrapper">
    			<div class="swiper-slide" >
    				<img src="../../assets/swiperImg.jpg" class="container1_swiper-container_img" />
    			</div>
    			<div class="swiper-slide">
    				<img src="../../assets/swiperImg.jpg" class="container1_swiper-container_img" />
    			</div>
    			<div class="swiper-slide">
    				<img src="../../assets/swiperImg.jpg" class="container1_swiper-container_img" />
    			</div>

    		</div>
    		<div class="swiper-pagination"></div>
    		<div class="swiper-button-prev swiper_slide"></div>
    		<div class="swiper-button-next swiper_slide"></div>
    	</div>
    </div>
  </div>
</template>
<script>
  import {Swiper,Navigation,Pagination,Autoplay}from 'Swiper';
  // import'../../assets/js/swiper-bundle.js'
  export default{
    name:"Swiper",

    data(){
      return{

      }
    },
    mounted(){
      Swiper.use([Navigation,Pagination,Autoplay])
      new Swiper('.swiper-container', {
      	autoplay: true, //可选选项，自动滑动
      	// direction: 'vertical', // 垂直切换选项
      	loop: true, // 循环模式选项

      	// 如果需要分页器
      	pagination: {
      		el: '.swiper-pagination',
      	},

      	// 如果需要前进后退按钮
      	navigation: {
      		nextEl: '.swiper-button-next',
      		prevEl: '.swiper-button-prev',
      	},

      	//如果需要滚动条
      	// scrollbar: {
      	// 	el: '.swiper-scrollbar',
      	// },
      })
    }

  }
</script>
<style scoped>
  .swiper-container {
  	--swiper-theme-color: orange;
  	/* 设置Swiper风格 */
  	--swiper-navigation-color: white;
  	/* 单独设置按钮颜色 */
  	--swiper-navigation-size: 17px;
  	/* 设置按钮大小 */
  	background-color: ghostwhite;
  	width: 1250px;
    margin-right: 200px;
    margin-top: 30px;
  }
  /**
   * swipper
   */
  .container1 {
  /*  	background-color: burlywood; */
  }
  .swiper_slide{
    width: 40px;
    height:40px;
    background-color: powderblue;
    border-radius: 50%;
  }
  .swiper_slide:hover{background-color: mistyrose ;

  }
  .container1_swiper-container {
    /* 	background-color: #4169E1; */
    height: 300px;
  }

  .container1_swiper-container_img {
    height: 300px;
    width: 800px;
  }

  .swiper-slide {
    padding-left: 100px;
  }
</style>
